<!-- <div id="sign">
  <form #formRef="ngForm" (ngSubmit)="onSubmit(formRef.value)" class="layui-form">
    <fieldset ngModelGroup="login" class="layui-elem-field layui-field-title" style="margin-top: 20px;">

      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">Username: </label>
          <div class="layui-input-inline">
            <input name="username" type="text" [(ngModel)]="username" #usernameRef="ngModel" required minlength="3" class="layui-input">
          </div>
        </div>
        <div class="layui-inline">
          <label *ngIf="usernameRef.errors?.required" class="layui-form-label">thisisrequired</label>
        </div>
      </div>
      <label *ngIf="usernameRef.errors?.minlength" style="color:rgb(0, 255, 179)">should be at least 3 charactors</label>
      <label *ngIf="auth?.hasError">{{auth.errMsg}}</label>
      <br>

      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">Password: </label>
          <div class="layui-input-inline">
            <input name="password" type="password" [(ngModel)]="password" #passwordRef="ngModel" required class="layui-input">
          </div>
        </div>
        <div class="layui-inline">
          <label *ngIf="passwordRef.errors?.required" class="layui-form-label">thisisrequired</label>
          <br>
        </div>
      </div>
      <div style="text-align:center">
        <button type="submit" class="layui-btn layui-btn-primary" (click)="onSubmit()">Login</button>
        <button class="layui-btn layui-btn-primary" (click)="reset()">重置</button>
      </div>
    </fieldset>
  </form>
</div> -->

<!-- layer form -->
<div id="layerFormSignIn">
    <form #formRef="ngForm" (ngSubmit)="onSubmit(formRef.value)" class="layui-form">
        <div id="header">
            <h1>输入账户密码</h1>
            <br>
            <h2>LWM喜来登国际大酒店为您提供贴心服务</h2>
        </div>
        <fieldset ngModelGroup="login">
            <div class="layui-form">
                <div class="layui-form-item">
                    <div class="layui-row">
                        <div class="layui-col-md6 layui-col-md-offset3">
                            <label class="layui-form-label">Username </label>
                            <div class="layui-input-inline">
                                <input name="username" type="text" placeholder="username" [(ngModel)]="username" #usernameRef="ngModel" required minlength="3" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-col-md3">
                            <label *ngIf="usernameRef.errors?.required" class="notice1">This is required</label>
                            <label *ngIf="usernameRef.errors?.minlength" class="notice">Should be at least 3 charactors</label>
                            <label *ngIf="auth?.hasError" class="notice1">{{auth.errMsg}}</label>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-row">
                        <div class="layui-col-md6 layui-col-md-offset3">
                            <label class="layui-form-label">Password </label>
                            <div class="layui-input-inline">
                                <input name="password" type="password" placeholder="password" [(ngModel)]="password" #passwordRef="ngModel" required class="layui-input">
                            </div>
                        </div>
                        <div class="layui-col-md3">
                            <label *ngIf="passwordRef.errors?.required" class="notice1">This is required</label>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item" id="buttons" align="center">
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <button type="submit" class="layui-btn layui-btn-primary" (click)="onSubmit()">Login</button>
                            <button type="reset" class="layui-btn layui-btn-primary">Reset</button>
                        </div>
                    </div>
                </div>
            </div>
            <div id="button">
                <a href="index.html">
                    <i class="layui-icon">&#xe6af;</i> 返回首页
                </a>
                <br>
            </div>
        </fieldset>


    </form>
</div>

<!--弹出层的script在app.component.ts里，signIn只有弹出层，没有实际页面，需要把按钮改成notice，把app-sign-in放到app.component.html里-->